<template>
  <div class="border flex bg-white-color">
    <div
      class="arrow flex flex-mid flex-center border-right"
      @click="leftMovement"
    >
      <el-icon><arrow-left-bold /></el-icon>
    </div>
    <div class="pt-5 pl-5 flex-1 flex tag-wrap" ref="tagWrap">
      <el-tag class="mx-1 mr-10">主页</el-tag>
      <el-tag class="mx-1 mr-10" closable v-for="item in 20"
        >主页{{ item }}</el-tag
      >
    </div>
    <div
      class="arrow flex flex-mid flex-center border-left"
      @click="rightMovement"
    >
      <el-icon><arrow-right-bold /></el-icon>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const tagWrap = ref();
const rightMovement = (): void => {
  tagWrap.value.scrollLeft <= tagWrap.value.offsetWidth
    ? (tagWrap.value.scrollLeft += tagWrap.value.offsetWidth / 5)
    : (tagWrap.value.scrollLeft = tagWrap.value.offsetWidth);
};
const leftMovement = (): void => {
  tagWrap.value.scrollLeft < 80
    ? (tagWrap.value.scrollLeft = 0)
    : (tagWrap.value.scrollLeft -= tagWrap.value.offsetWidth / 5);
};
</script>

<style lang="scss" scoped>
.arrow {
  width: 50px;
}

.tag-wrap {
  overflow-y: auto;
  .el-tag {
    border-bottom: none;
    border-end-start-radius: 0px;
    border-end-end-radius: 0px;
  }
  &::-webkit-scrollbar {
    width: 0px;
    height: 2px;
  }
}
</style>
